@import 'snapcraft_patterns_icons';

@mixin snapcraft-market {
  $white-overlay-color: rgba(255, 255, 255, .5);
  $black-overlay-color: rgba(0, 0, 0, .5);
  $black-overlay-light-color: rgba(0, 0, 0, .2);
  $white-overlay-strong-color: rgba(255, 255, 255, .9);

  // Override baseline alignment
  .p-form--stacked .p-form__group--top {
    align-items: flex-start;
  }

  // hack to make anchor link behave like a button
  .js-market-revert.is-disabled {

    cursor: not-allowed;
    opacity: .5;

    &:hover {
      background-color: transparent;
    }
  }

  .p-editable-icon {
    cursor: pointer;
    display: inline-block;
    margin-bottom: .7rem;
    margin-right: 3.2877%;
    position: relative;

    .p-editable-icon__icon {
      @include vf-icon-plus($color-mid-dark);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1rem;
      border: 1px solid $color-mid-light;
      border-radius: $border-radius;
      height: 3.75rem;
      overflow: hidden;
      position: relative;
      width: 3.75rem;

      img {
        background: $color-x-light;
        height: 100%;
        width: 100%;
      }

      .p-editable-icon__change {
        align-items: center;
        background: $white-overlay-strong-color;
        bottom: 0;
        color: $color-link;
        display: flex;
        justify-content: center;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
      }

      &:hover img:not([src=""]) + .p-editable-icon__change {
        opacity: 1;
      }
    }

    &:hover {
      border-color: $color-link;
    }

    &__label {
      line-height: 55px;
      padding-top: .25rem;
    }
  }

  .p-editable-icon__actions {
    display: block;
  }

  .p-editable-icon__delete {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 2rem;
    justify-content: center;
    margin-bottom: .5rem;
    width: 2rem;
  }

  // Stick the Revert, Apply buttons to the top
  .snapcraft-p-sticky {
    background: $color-x-light;
    position: sticky;
    top: 0;
    z-index: 1;

    // force it back to static position (for example during the tour)
    &.is-static {
      position: static;
    }

    & .row {
      padding-bottom: $sp-medium;
      padding-top: $sp-medium;
    }

    &.sticky-shadow {
      box-shadow: 1px 1px 10px $black-overlay-light-color;
    }

    @media screen and (max-width: $breakpoint-x-small) {
      .js-market-submit {
        margin-top: $sp-x-small !important;
      }
    }

    .p-inline-list__item {
      line-height: 2.3rem;
    }

    [class*="p-button"]:not([class*="p-button__"]) {
      margin-right: $sph-inner;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .p-market-banner {

    .p-market-banner__image-holder {
      cursor: pointer;
      position: relative;
    }

    .p-market-banner__image {
      background-color: $color-x-light;
      border: 1px solid $color-mid-light;
      border-radius: $border-radius;
      color: $color-link;
      cursor: pointer;
      margin-bottom: $spv-outer--medium;
      padding-top: 33.33333%;
      position: relative;
      text-align: center;

      img {
        bottom: 0;
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
      }

      &.is-empty {
        & > div {
          align-items: center;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }

    .p-market-banner__image-holder:hover,
    .p-market-banner__image-holder.is-focused {
      .p-market-banner__image {
        border: 1px solid $color-link;
      }

      .p-market-banner__remove {
        opacity: 1;
      }

      .p-market-banner__change {
        border: 1px solid $color-link;
        border-radius: $border-radius;
        opacity: 1;
      }
    }

    .p-market-banner__remove {
      right: 1px;
      top: 1px;

      .p-icon--delete {
        display: block;
        top: 0;
      }
    }

    .p-market-banner__change {
      align-items: center;
      background-color: $white-overlay-strong-color;
      bottom: 0;
      color: $color-link;
      display: flex;
      justify-content: center;
      left: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .p-icon--delete {
    @include snapcraft-icon-delete($color-mid-dark);

    &:hover {
      @include snapcraft-icon-delete($color-negative);
    }
  }

  .p-market-remove {
    background: $color-x-light;
    box-sizing: content-box;
    cursor: pointer;
    opacity: 0;
    padding: .25rem;
    position: absolute;
    width: 1rem;
    z-index: 1;

    &:hover {
      opacity: 1;

      .p-icon--delete {
        @include snapcraft-icon-delete($color-negative);
      }
    }
  }
}
